<template>
    <div class="order">
        <div class="hand">
            <navSearch @addBtn="addShow" @serach="search"></navSearch>
        </div>
        <div class="table">
            <el-table
            :data="list"
            empty-text="暂无数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%"
            >
                <el-table-column prop="date" label="时间" sortable width="180" />
                <el-table-column prop="orderId" label="订单号" width="280" />
                <el-table-column prop="name" label="用户" width="100" />
                <el-table-column prop="phone" label="电话" width="200" />
                <el-table-column prop="address" label="地址" width="240" />
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button size="small" 
                        @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button
                        >
                        <el-popconfirm title="确认删除吗" confirm-button-text="删除" cancel-button-text="取消" confirm-button-type="danger">
                            <template #reference>
                                <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button
                                >
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="200" />
            </div>
        </div>
        <div class="addFrom">
            <el-dialog v-model="addBtnInt.show" title="订单信息">
                <el-form :model="orderFromInt">
                    <el-form-item label="时间" :label-width="formLabelWidth">
                        <el-date-picker
                            v-model="orderFromInt.date"
                            type="date"
                            placeholder="选择时间"
                            size="default"
                        />
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="orderFromInt.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item type="number" label="电话" :label-width="formLabelWidth">
                        <el-input v-model="orderFromInt.phone" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input v-model="orderFromInt.address" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addBtnInt.show = false">取消</el-button>
                        <el-button type="primary" @click="addBtnInt.show = false">
                        确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs} from "vue";
import navSearch from "@/components/navSearch.vue"
import {initData} from '../../types/order';

export default defineComponent({
    components: {
        navSearch
    },
    setup() {
        const data = reactive(new initData)
        // 添加
        const addShow = ()=> {
            data.addBtnInt.show = true
        }
        // 搜索
        const search = (val: any)=> {
            console.log(val)
        }
        data.list = [
            {
                date: '2016-05-03',
                orderId: 'yesir33065541',
                name: '张三',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-04',
                orderId: 'yesir33065541',
                name: '李四',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-03',
                orderId: 'yesir33065541',
                name: '张三',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-04',
                orderId: 'yesir33065541',
                name: '李四',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-03',
                orderId: 'yesir33065541',
                name: '张三',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-04',
                orderId: 'yesir33065541',
                name: '李四',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-03',
                orderId: 'yesir33065541',
                name: '张三',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
            {
                date: '2016-05-04',
                orderId: 'yesir33065541',
                name: '李四',
                phone: 13888454621,
                address: '云南省昆明市官渡区关兴路262号',
            },
        ]
        console.log(data)
        return {
            ...toRefs(data),
            addShow,
            search
        }
    }

})
</script>

<style scoped>
.table {
    padding: 10px 0;
}
.pagination {
    padding: 20px 0;
}
</style>